<template>
  <div :class="{'border-radius':template=='0'}" class="timeAppointment_index_sort">
    <c-sort :supplier="true" v-on:sortIn="sortOut" style="background: #fff;"></c-sort>
    <div :class="template=='0'?'home-box':'search-box'" v-if="good&&good.length!==0">
      <div class="choicenessList" v-for="item in good" :key="item.id"  >
        <div class="choicenessList-left">
          <div class="img">
            <img :src="item.thumb" alt="" />
          </div>
          <div class="rightBox">
            <div class="title">{{ item.title }}</div>
            <div class="total">已售{{ item.total_sales }}</div>
            <div class="price" v-if="item.has_option == 1">
              {{ $i18n.t("money") }}{{ item.min_price }}
            </div>
            <div class="price" v-else>{{ $i18n.t("money") }}{{ item.price }}</div>
          </div>
        </div>
        <div style="flex-shrink: 0;"   @click="toGood(item.goods_id)">
          <button class="button">预约</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import cSort from "components/sort";
export default {
  props: {
    good: {
      type: null,
    },
    template:{
      type:String,
      default:"0"
    }
  },
  data() {
    return {};
  },
  watch: {
    good(res) {
      // console.log(res)
    },
  },
  methods: {
    toGood(key) {
      this.$router.push(this.fun.getUrl("goods", { id: key }));
    },
    getGoods(json) {
      this.$emit("tapJson", json);
    },
    sortOut(e) {
      this.order_field = e.order_field;
      this.order_by = e.order_by;
      let json = {};
      if (this.order_field == "id") {
        // 升降序 综合 asc
        if (this.order_by == "asc") {
          json = {
            order_by: "asc",
          };
        } else {
          json = {
            order_by: "desc",
          };
        }
      } else if (this.order_field == "show_sales") {
        // 升降序 销量
        if (this.order_by == "asc") {
          json = {
            order_by: "asc",
            order_field: "show_sales",
          };
        } else {
          json = {
            order_by: "desc",
            order_field: "show_sales",
          };
        }
      } else if (this.order_field == "price") {
        //升降序 价格
        if (this.order_by == "asc") {
          json = {
            order_by: "asc",
            order_field: "price",
          };
        } else {
          json = {
            order_by: "desc",
            order_field: "price",
          };
        }
      }
      this.getGoods(json);
    },
  },
  components: {
    cSort,
  },
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.timeAppointment_index_sort ::v-deep .van-field__control{
  font-size: 0.75rem;
  color: #999;
}

.timeAppointment_index_sort ::v-deep .grid-content{
  font-size: .8125rem;
  color: #6E6E79;
}
.home-box{
  border-top: 1px solid #ECECEC;
  background: #fff;
  padding:.75rem;
}
.home-box .choicenessList:first-child{
  margin-top: 0;
}
.border-radius{
  border-radius: 0.5rem;
  overflow: hidden;
}
.search-box{
  background: #fff;
  margin: .75rem;
  padding:0.75rem .75rem;
  border-radius: 0.5rem;
  .choicenessList{
    margin-top: 0 !important;
  }
}
.choicenessList:last-child{
  margin-bottom: 0 !important;
}
.choicenessList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.375rem;
  margin-bottom: 1.25rem;
  margin-top: .75rem;
  .button{
      background-color: var(--themeBaseColor);
      display: block;
      padding: .375rem 1.5938rem;
      color: #fff;
      border-radius: 1.0938rem;
      font-size: .75rem;
      border: none;
  }
  .choicenessList-left{
    display: flex;
    // align-items: center;
    // margin-bottom: 1.56rem;
    // margin-top: 0.56rem;
  }

  .rightBox {
    margin-left: 0.63rem;
    margin-right: 1.75rem;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-between;
    // align-items: flex-start;

    .title {
      text-align: left;
      font-size: 0.88rem;
      color: #3B3B4A;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .total {
      text-align: left;
      font-size: 0.75rem;
      margin-top: 0.25rem;
      margin-bottom: 0.3125rem;
      color: #AAAAB3;
    }

    .price {
      text-align: left;
      font-size: 1rem;
      color: #F15353;
      font-weight: 500;
    }
  }

  .img {
    flex-shrink: 0;
    width:4.375rem;
    height:4.375rem;
    background-color: #9d9d9d;
    border-radius: 0.25rem;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
